<template>
    <div class="host">
        <CheckItem :itemID="itemID" :show.sync="checkItemModal" :data="checkItem" @save="saveCheckItem" :model="model"></CheckItem>
        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" title="Edit Item" :id="itemID" @submit="confirmSubmit" :action="action" :height="600"></ItemDetail>
        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12  bg-white p-0 m-0">
                <item-table title="Host List" :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort"
                            :total="total" :model="model" isColumns isAdd @add="addItem"  isExport @export="exportExcel"
                >
                    <template slot="company__id" slot-scope="props">
                        {{props.item.company__company_name}}
                    </template>
                    <template slot="auto_send_order_email" slot-scope="props">
                        <span class="label label-success" v-if="props.item.auto_send_order_email">YES</span>
                        <span class="label label-danger" v-else>
                            NO
                        </span>
                    </template>
                    <template slot="comment" slot-scope="props" v-if="props.item.comment">
                        <div class="td-ellipsis">
                            {{props.item.comment}}
                        </div>
                        <i class="fif fif-ellipsis text-info"  @click="showTdDetail(props.item.comment)" v-tooltip.top="'show detail'"></i>
                    </template>
                    <template slot="email" slot-scope="props" v-if="props.item.email">
                        <div class="td-ellipsis">
                            {{props.item.email}}
                        </div>
                        <i class="fif fif-email text-info" @click="showTdDetail(props.item.email)"></i>
                    </template>
                    <template slot="how_to_send_bill" slot-scope="props" v-if="props.item.how_to_send_bill">
                        <div class="td-ellipsis">
                            {{props.item.how_to_send_bill}}
                        </div>
                        <i class="fif fif-email text-info" @click="showTdDetail(props.item.how_to_send_bill)"></i>
                    </template>
                    <template slot="actions" slot-scope="props">
                        <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5" @click="editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                        <button type="button" class="btn btn-primary btn-outline btn-circle btn-md m-r-5"
                                @click="checkList(props, model)">
                            <i class="fif fif-check_list-border"></i>
                        </button>
                        <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5" @click="deleteItem(props)">
                            <i class="fif fif-delete"></i>
                        </button>
                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    import CheckItem from '@/components/widgets/CheckItem'
    // mixin
    import {lifeHookMixin, itemMixin, checkListMixin} from '@/mixins/item'

    export default {
        name: "Host",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail, CheckItem},
        mixins: [lifeHookMixin, itemMixin, checkListMixin],
        created() {
            // model
            this.model = 'Host'
        }
    }
</script>

<style scoped>

</style>